<template>
  <div class="-mt-46 pb-140">
    <div
      class="bg-cover bg-center h-204"
      :style="`background-image: url(${IMG_CDN_39}/member/vip_top_bg4.png)`"
    />
    <div
      class="-mt-15 px-15 pt-5 bg-white z-1 sticky top-46 left-0"
      :class="scrollStore.scrollY > 158 ? '' : 'rounded-[16px_16px_0_0]'"
    >
      <NormalTabs
        :tabs="categoryInfoList.map(item => ({ id: item.id, name: item.name }))"
        :active-id="activeCategoryId"
        @update:active-id="activeCategoryId = $event"
      />
    </div>
    <div class="px-15">
      <div class="mt-15">
        <NormalTabs
          :tabs="
            rechargeProdInfoList.map(item => ({
              id: item.id,
              name: item.rechargeProdName,
              money: item.priceMoney
            }))
          "
          :active-id="activeRechargeProdId"
          @update:active-id="activeRechargeProdId = $event"
        >
          <template #item="{ tab, setItemRef, handleTabClick }">
            <div
              :ref="setItemRef"
              class="mr-15 px-10 h-120 w-115 rounded-12 border-2 border-solid flex-shrink-0 flex justify-center flex-col"
              :class="{
                'border-2614FF c-bg-2614FF-5  ': activeRechargeProdId === tab.id
              }"
              @click="handleTabClick"
            >
              <div
                class="mt-18 font-bold text-14 line-clamp-2 whitespace-normal text-center"
              >
                {{ tab.name }}
              </div>
              <div class="mt-auto mb-20 font-bold line-clamp-1 text-center">
                <span class="text-16">￥</span>
                <span class="text-24">{{ tab.money }}</span>
              </div>
            </div>
          </template>
        </NormalTabs>
      </div>
      <div class="mt-30">
        <div class="flex justify-between items-center pb-10">
          <div class="text-16 font-bold">套餐权益</div>
          <div class="ml-auto relative text-999999">
            <span class="text-13">数字人版本对比</span>
            <svg-icon name="icon-gengduo" :size="12" color="#999" />
          </div>
        </div>
        <div
          v-for="(item, index) in rechargeProdInfo.rechargeAssetInfoVoList"
          :key="index"
          class="flex items-center h-50"
        >
          <img
            class="w-34 h-34 rounded-[50%]"
            :src="ASSET_TYPE_ICON_MAP[item.assetType]"
            alt=""
          />
          <span class="pl-10 text-14"
            >{{ ASSET_TYPE_MAP[item.assetType] }} {{ item.assetAmount }}</span
          >
        </div>
        <div v-if="rechargeProdInfo.remark">
          <div class="mt-30 text-16 font-bold">产品说明</div>
          <div
            class="mt-10 mb-20 text-13 text-999999 leading-24 whitespace-pre-wrap break-words"
          >
            {{ rechargeProdInfo.remark }}
          </div>
        </div>
      </div>
    </div>
    <div class="px-15 van-nav-bar--fixed !top-auto bottom-0 w-full bg-white">
      <!-- 使用独立的 ButtonFooter 组件 -->
      <ButtonFooter
        :show-agree-section="true"
        :button-text="`¥${rechargeProdInfo.priceMoney} 立即购买`"
      />
      <div class="h-50 flex justify-center items-center text-12">
        <div
          class="h-14 w-14 relative rounded-[50%] border border-solid"
          :class="
            isAgree
              ? 'bg-2614FF flex justify-center items-center border-2614FF'
              : 'border-CCCCCC'
          "
          @click="toggleAgree"
        >
          <svg-icon v-if="isAgree" name="icon-duihao" :size="8" color="#fff" />
        </div>
        <div class="text-666666 pl-5">阅读并同意</div>
        <div class="text-4D00FF">《购买协议》</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  CategoryInfoData,
  getCategoryList,
  getRechargeProdList,
  RechargeProdInfoData
} from "@/api/PackageList";
import { ASSET_TYPE_ICON_MAP, ASSET_TYPE_MAP, IMG_CDN_39 } from "@/constants";
import { onMounted, ref, watch } from "vue";
import { useScrollStore } from "@/store/modules/scrollStore";
import NormalTabs from "@/components/NormalTabs/index.vue";

// 已选中id
const activeCategoryId = ref<string>("");
// 分类列表
const categoryInfoList = ref<CategoryInfoData[]>([]);
// 分类接口
const categoryListPort = async () => {
  categoryInfoList.value = await getCategoryList();
  if (categoryInfoList.value.length) {
    activeCategoryId.value = categoryInfoList.value[0].id;
  }
};
// 获取滚动距离
const scrollStore = useScrollStore();

// 已选中id
const activeRechargeProdId = ref<string>("");
// 子类列表
const rechargeProdInfoList = ref<RechargeProdInfoData[]>([]);
// 充值信息
const rechargeProdInfo = ref<RechargeProdInfoData>({
  id: "",
  rechargeProdName: "",
  priceMoney: 0,
  remark: "",
  rechargeAssetInfoVoList: []
});
// 子类接口
const getRechargeProdListPort = async (categoryId: string) => {
  rechargeProdInfoList.value = await getRechargeProdList({ categoryId });
  if (rechargeProdInfoList.value.length) {
    activeRechargeProdId.value = rechargeProdInfoList.value[0].id;
  }
};
// 监听 activeCategoryId 变化，自动触发子类请求
watch(
  () => activeCategoryId.value,
  newId => {
    if (newId) {
      getRechargeProdListPort(newId);
    }
  },
  { immediate: true }
);
// 监听 activeRechargeProdId 变化，自动触发变更信息
watch(
  () => activeRechargeProdId.value,
  newId => {
    if (newId) {
      rechargeProdInfo.value = rechargeProdInfoList.value.find(
        item => item.id === newId
      );
    }
  },
  { immediate: true }
);
// 是否同意协议
const isAgree = ref(false);
// 切换同意状态
const toggleAgree = () => {
  isAgree.value = !isAgree.value;
};
// 初始化接口
onMounted(() => {
  categoryListPort();
});
</script>
<style scoped></style>
